<template>
    <div>
      <div class="menuitem">
        <!-- 子菜单（有 children 时） -->
        <el-submenu v-if="hasChildren" :index="item.path">
          <template slot="title">
            <!-- 动态加载图标 -->
            <img v-if="item.meta && item.meta.icon" :src="require('@/assets/icons/svg/' + item.meta.icon + '.svg')" alt="加载失败" width="20px" height="20px" />
            {{ item.meta.title }}
          </template>
  
          <!-- 递归调用自身渲染子菜单 -->
          <menu-item v-for="subItem in item.children" :key="subItem.name" :item="subItem" />
        </el-submenu>
  
        <!-- 没有子菜单时，渲染为普通菜单项 -->
        <el-menu-item v-else :index="item.path">
          <!-- 动态加载图标 -->
          <img v-if="item.meta && item.meta.icon" :src="require('@/assets/icons/svg/' + item.meta.icon + '.svg')" alt="加载失败" width="20px" height="20px" />
          {{ item.meta.title }}
        </el-menu-item>
      </div>
      <div class="right-content" :style="{ backgroundColor: 'white' }">
        <!-- 右侧信息展示页面内容 -->
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MenuItem',
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    computed: {
      hasChildren() {
        return this.item.children && this.item.children.length > 0;
      }
    }
  };
  </script>
  
  <style scoped>
  img {
    margin-right: 8px;
  }
  .menuitem {
    width: 200px;
    border: 1px solid #ccc;
  }
  </style>